<!--公共部分-->

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding:0;margin: 0">
  <div >
    <el-row :gutter="10" style="margin: 0;">
      <el-col :span="1" :offset="6" style="margin-top: 10px;margin-right: 10px"><img src="avatar.png" ></el-col>
      <el-col :span="3">
        <span style="display: block; font-size: 20px;margin-top: 20px;position: relative;right: auto;color:#8ab8fa;font-weight: bold;"><b>鹿鹿商城</b></span>
      </el-col>
      <el-col :span="8"><span style="display: block;margin-top: 20px;">首页&nbsp;|&nbsp;热点咨询&nbsp;|&nbsp;商家入驻&nbsp;|&nbsp;社会招聘&nbsp;|&nbsp;校园招聘&nbsp;|&nbsp;帮助中心</span></el-col>
      <el-col :span="2">
        <el-dropdown style="margin-top: 15px;margin-left: 100px;">
          <el-button>
            <el-icon><User /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item><el-button type="primary" :v-if="push">后台管理页面</el-button></el-dropdown-item>
              <el-dropdown-item><el-button type="danger" @click="logout">退出登录页面</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-menu mode="horizontal" background-color="#0aa1ed" text-color="#fff"
             default-active="1" active-text-color="#ff0" style="position: relative;">
      <el-menu-item index="1" style="margin: 0 20px 0 100px;">女装</el-menu-item>
      <el-menu-item index="2" style="margin: 0 20px;">男装</el-menu-item>
      <el-menu-item index="3" style="margin: 0 20px;">医药</el-menu-item>
      <el-menu-item index="4" style="margin: 0 20px;">新分类</el-menu-item>
      <el-menu-item index="5" style="margin: 0 20px;">果蔬食品</el-menu-item>
      <el-input
          v-model="input2"
          style="width: 200px;height: 30px; margin-top: 15px;position: absolute;right: 150px;"
          placeholder="请输入商品信息"
          :suffix-icon="Search"
      />
    </el-menu>

  </div>
      </el-header >
      <el-main style="padding:0;overflow-y: auto; margin-top: 68px">
        <router-view/>
      </el-main>
      <el-footer
          style="background-color: #282c30;color:#666;height: 180px;padding-top: 20px;">
        <p style="text-align: center;">Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p style="text-align: center;">涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p style="text-align: center;">达外在线WWW.TMOOCOUT.CN 专注于IT职业技能培训</p>
      </el-footer>
    </el-container>

  </div>



</template>
<script setup>
import {ref} from "vue";
import { Search } from '@element-plus/icons-vue'


//用户
const input2 = ref('');

//退出登录
const logout = ()=>{
  if(confirm('您确认要退出登录吗?')){
    //退出时要:清空本地存储+跳转至登录页+清除已取出的用户数据
    localStorage.removeItem('user');
    window.location.href = '/login';
  }
}

/* window对象是浏览器内置的全局对象,代表了当前浏览器窗口 */
window.addEventListener('resize',function (){
  //alert('窗口大小被改变了!');
})

//假方法
// const push = ()=>{
//   if (level==10){
//     false;
//   }else {
//     true;
//   }
// }
</script>
